<template>
  <div class="tab-bar-item" :class="{ active: isActive }" @click="handleClick">
    <i :class="iconStyle"></i>
    <slot></slot>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import useParent from '../hooks/useParent'
const { parent, index } = useParent('TabBar')
const props = defineProps({
  icon: {
    type: String,
    required: true,
  },
})
const iconStyle = computed(() => {
  return `iconfont icon-${props.icon}`
})
// 父组件的active和当前组件的index进行比较
const isActive = computed(() => {
  return parent.props.active === index.value
})
// 点击后触发父组件的setActive方法
const handleClick = () => {
  parent.setActive(index.value)
}
</script>
<style scoped>
@import 'http://at.alicdn.com/t/c/font_4851857_6bptxnujv6u.css';
.tab-bar-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #666;
}
.active {
  color: #f11;
}
</style>
